<template>
<!-- 版心 -->
    <div class="wrap headerwrap">
        <!-- logo -->
        <div class="logobox">
            <img src="../assets/images/indexLogo.6f8ac4f0.png" alt="">
        </div>
        <!-- nav导航区 -->
        <ul class="navbox">
            <li :class="{current:$route.path == '/home'}" @click="$router.push('/home')">首页</li>
            <li :class="{current:$route.path == '/goods'}" @click="$router.push('/goods')">全部商品</li>
            <li :class="{current:$route.path == '/user'}" @click="$router.push('/user')">个人中心</li>
            <li :class="{current:$route.path == '/order'}" @click="$router.push('/order')">我的订单</li>
            <li :class="{current:$route.path == '/free'}" @click="$router.push('/free')">专属福利</li>
        </ul>
        <!-- search搜索区域 -->
        <div class="searchbox">
            <input type="text" placeholder="输入关键字"  v-model="userInputSearch"/>
            <span>
                <img src="../assets/images/search.png" alt="" @click="toSearch()">
            </span>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            userInputSearch:'',
 
        }
    },
    methods:{
        toSearch(){
            console.log('准备搜索',this.userInputSearch);
            // 跳转到/goods,并携带上参数
            this.$router.push(`/goods?keyword=${this.userInputSearch}`)
            // 清空搜索框
            this.userInputSearch=''
        }
    }
}
</script>
 
<style lang = "less" scoped>
    .headerwrap{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .navbox{
            width: 500px;
            font-size: 16px;
            font-family: SourceHanSansSC;
            font-weight: 500;
            color: #242b39;
            display: flex;
            justify-content: space-between;
            li{
                cursor: pointer;
            }
            .current{
                color: #0a328e;
                font-weight: 700;
            }
        }
        .searchbox{
            display: flex;
            input{
                width: 214px;
                height: 40px;
                border: 1px solid #dedede;
                border-radius: 20px 0px 0px 20px ;
                padding-left: 19px;
                box-sizing: border-box;
                outline-style: none;
            }
            span{
                width: 50px;
                height: 40px;
                background: #0a328e;
                border-radius: 0px 20px 20px 0px;
                line-height: 40px;
                text-align: center;
                .search-btn{
                    width: 15px;
                    height: 15px;
                }
            }
        }
    }
</style>